<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="../../element/index.css" rel="stylesheet" />
		<script src="../../js/vue.js"></script>
		<script src="../../element/index.js"></script>
		<script src="../../js/axios.js"></script>
		<script src="../../js/gsaucommon.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			body {
				height: 100%;
			}

			html {
				height: 100%;
			}

			/* 大盒子 */
			#addtableone {

				width: 90%;
				/* 		box-shadow: 20px; */
				background-color: white;
				margin: 0 auto;
				box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
				margin-top: 20px;
			}

			#header {
				top: 0px;
				background-color: white;
				position: sticky;
				z-index: 5;
			}

			#header #left {
				height: 80px;
				line-height: 80px;
				text-indent: 12px;

			}

			#header #right {
				height: 80px;

				line-height: 80px;
				/* font-size: 32px;
				font-weight: bold; */
				text-align: right;

			}

			#hr1 {

				/* width:98%;
				margin: 0 auto; */
				color: whitesmoke;
				margin-bottom: 30px;

			}
		</style>
	</head>
	<body>
		<div id="addtableone">
			<!-- 			<el-row>
			  <el-col :span="24"><div class="grid-content bg-purple-dark">
			  <div class="block">
			    <span class="demonstration"> 登记表类型</span>
			    <el-cascader
			      v-model="value"
			      :options="options"
			      @change="handleChange"></el-cascader>
			  </div>
			  </div></el-col>
			</el-row> -->

			<el-row id="header">
				<el-col :span="12">
					<div class="grid-content bg-purple" id="left">
						<h3>论文修改</h3>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="grid-content bg-purple-light" id="right" style=" padding-right: 80px;">
						<el-button type="primary" @click="golist">
							<!-- <el-link style="width: 100%;" href="list.html" target="_self" :underline="false"></el-link> -->
							返回
						</el-button>
					</div>
				</el-col>
				<hr id="hr1" />
			</el-row>

			<el-row style="padding-left: 40px;">


				<!-- 表单子属性有el-form-item,el-row(多个el-form-item)同级别,可自行删除不需要的-->
				<!-- 短框200px,长框300px,el-form-item width -->
				<!-- 选择框或输入框 label用于显示, value 与 VUE中对应属性绑定 -->
				<!--正则 el-form-item prop="值"  值和rules 中的规则对象绑定-->
				<!--最后的验证函数已经注释可正常提交 ,若想使用查看提交按钮处注释, -->
				<!-- 	刊物级别,和论文类型 使用v-for,其他的是固定的 -->
				<!-- 出版时间和现在时间已经写好可直接使用,onsubmit函数中 -->
				<!--证明材料未设置必须提交,也未绑定table中的值 掌握文件上传后才自行设置-->
				<!--提交后表单信息归零函数未设置,后期自行设置-->
				<el-form :model="form" :rules="rules" ref="form" label-width="80px" class="demo-ruleForm" name>

					<!-- <el-form-item label="登记类型" style="width: 300px;" prop="region">

								<el-select v-model="form.region" placeholder="请选择添加表类型">
									<el-option label="发表论文登记表" value="1"></el-option>
									<el-option label="获奖情况登记表" value="2"></el-option>
									<el-option label="教材与专著登记表" value="3"></el-option>
									<el-option label="科研项目登记表" value="4"></el-option>
									<el-option label="指导竞赛" value="5"></el-option>
									<el-option label="教改项目登记表" value="6"></el-option>
									<el-option label="专利及软件著作权" value="7"></el-option>
									<el-option label="xxx登记表" value="8"></el-option>
								</el-select>
							</el-form-item> -->


					<el-form-item label="填报人" style="width: 200px" prop="tianbaoName">
						<el-input v-model="form.tianbaoName"></el-input>
					</el-form-item>
					<el-form-item label="论文名称" style="width: 500px;" prop="name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-row>
						<el-col :span="8">
							<el-form-item label="刊物名称" style="width: 300px;" prop="kanwuName">
								<el-input v-model="form.kanwuName"></el-input>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="刊物级别" style="width: 300px;" prop="kanwuJibie">
								<el-select v-model="form.kanwuJibie" placeholder="请选择刊物级别" prop="kanwuJibie">
									<el-option v-for="(item,index) in kanwuJibie" :key="index" :value="item.id"
										:label="item.name"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="得分" style="width:200px" prop="deFen">
								<el-input v-model.number="form.deFen"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row>
						<el-col :span="8">
							<el-form-item label="出版日期" style="width: 300px" prop="pubDate">
								<el-date-picker type="date" placeholder="选择日期" v-model="form.pubDate"
									value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="总人数" style="width:200px" prop="zongRenShu">
								<el-input v-model.number="form.zongRenShu"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="本人排名" style="width:200px" prop="meSort">
								<el-input v-model.number="form.meSort"></el-input>
							</el-form-item>

						</el-col>
					</el-row>

					<el-form-item label="证明材料" style="width: 50%;">

						<el-upload class="upload-demo" drag action="http://localhost:8080/lunwen/upload"
							:on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove"
							:on-success="uploadSuccess" :on-error="uploadError" :before-upload="beforeUpload" multiple
							:on-exceed="handleExceed" :file-list="fileList">
							<i class="el-icon-upload" ></i>
							<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
							<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="论文类型" prop="lunwenLeixing">
						<el-checkbox-group v-model="form.lunwenLeixing">
							<el-checkbox v-for="(item,index) in lunwenLeixing" :key="index" :label="item.name"
								name="type"></el-checkbox>
						</el-checkbox-group>
					</el-form-item>
					<el-form-item label="通讯作者" prop="isTongxunZuozhe">
						<el-radio-group v-model="form.isTongxunZuozhe">
							<el-radio label="是">是</el-radio>
							<el-radio label="否">否</el-radio>
						</el-radio-group>
					</el-form-item>

					<!--  提交栏 -->
					<el-form-item>
						<el-button type="primary" @click="onsubmit('form')">修改信息</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
				<!-- </el-col> -->
			</el-row>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#addtableone',
				data: {
					form: {
						id: '',
						tianbaoName: '',
						name: '',
						kanwuName: '',
						kanwuJibie: '',
						deFen: '',
						pubDate: '',
						zongRenShu: '',
						meSort: '',
						isTongxunZuozhe: '',	
						lunwenLeixing: [],
						fileList: [],
					},
					lunwen: [],
					kanwuJibie: [],
					lunwenLeixing:[],
					fileMapprings: [],
					zhengmingcailiao:[],
					fileList: [],
					loading: false,
					show:true,
					lastuploadfile: '',
					rules: {
						tianbaoName: [{
								required: true,
								message: '请输入填报人',
								trigger: 'blur'
							},
							{
								min: 1,
								max: 20,
								message: '长度在 1 到 20 个字符',
								trigger: 'blur'
							}
						],
						
						kanwuJibie: [{
							required: false,
							message: '请选择登记表级别',
							trigger: 'change'
						}],
						name: [{
							required: true,
							message: '请输入论文名称',
							trigger: 'blur'
						}],
						kanwuName: [{
							required: true,
							min: 1,
							message: '长度至少1的字符',
							trigger: 'blur'
						}],
						deFen: [{
								required: false
							},
							{
								type: 'number',
								message: '得分必须为数字值',
								trigger: 'blur'
							},
						
						],
						zongRenShu: [{
								required: false
							},
							{
								type: 'number',
								message: '人数必须为数字值',
								trigger: 'blur'
							},
						],
						meSort: [{
							required: true,
							type: 'number',
							message: '排名必须为数字值',
							trigger: 'blur'
						}, ],

						pubDate: [{
							type: 'string',
							required: false,
							message: '请选择日期',
							trigger: 'change'
						}],

						lunwenLeixing: [{
							type: 'array',
							required: true,
							message: '请至少选择一个类别',
							trigger: 'change'
						}],
						isTongxunZuozhe: [{
							required: false,
							message: '是否是通讯作者',
							trigger: 'change'
						}],
					}

				},
				//生命周期函数
				created() {
					this.form.id = localStorage.getItem("id")
					this.findAll(this.form.id)
					this.kanwujibiefind()
					this.lunwenleixingfind()
					this.findZhengMingCaiLiao(this.form.id)
				},
				methods: {
					findZhengMingCaiLiao:function(id){
						axios.get(window.gsau+"lunwen/findzhengmingcailiao/"+id).then((res)=>{
							this.zhengmingcailiao=res.data.data
							for(const i in this.zhengmingcailiao){
								let m={
									name:'',
									lastModified:'',
									status:'',
									id:'',
									url:''
								}
								m=new Array()
								m.id=this.zhengmingcailiao[i].id
								m.name=this.zhengmingcailiao[i].fileName
								m.url=this.zhengmingcailiao[i].fileFullPath
								this.fileList.push(m)
							}
						})
					},
					kanwujibiefind: function() {
						axios.get(window.gsau + "kanwujibie/findall").then((res) => {
							//console.log(res)
							this.kanwuJibie = res.data.data
						})
					},
					lunwenleixingfind: function() {
						axios.get(window.gsau + "lunwenleixing/findall").then((res) => {
							//console.log(res)
							this.lunwenLeixing = res.data.data
						})
					},
					golist: function() {
						window.location = "list.html"
					},
					findAll: function(id) {
						axios.get(window.gsau + "lunwen/find/" + id).then((res) => {
							//console.log(res)
							this.lunwen = res.data.data
							this.form=this.lunwen
							this.form.deFen = parseInt(this.lunwen.deFen)
							//console.log(this.form)
							
							this.form.lunwenLeixing = res.data.data.lunwenLeixing.split(',')
							
							//console.log(this.form.lunwenLeixing)
						})
					},
					//证明材料函数与证明材料的钩子函数绑定
					beforeUpload(file) {
						this.loading = true
						console.log("beforeUpload")
						//校验文件类型，文件大小
						console.log(file)
					},
					submitUpload() {
						this.$refs.upload.submit();
					},
					handleRemove(file, fileList) {
						console.log("handleRemove")

					},
					handlePreview(file) {
						console.log("handlePreview")
						for(let i=0;i<this.zhengmingcailiao.length;i++){
							if(this.zhengmingcailiao[i].id=file.id)
							{
								window.location="http://localhost:8080/files/"+this.zhengmingcailiao[i].fileFullPath
								//console.log(this.zhengmingcailiao[i].fileFullPath)
							}
						}
						console.log(this.zhengmingcailiao)
						console.log(file);
						//let path=file.url.substr()
						//console.log(path)
					},
					handleExceed(files, fileList) {
						console.log("handleExceed")
						this.$message.warning(
							`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
					},
					beforeRemove(file, fileList) {
						console.log("beforeRemove")
						//删除提交的表单表中要移除的文件
						let index = '';
						for (const i in fileList) {
							if (fileList[i] == file) {
								index= file.id;
								console.log(file.id)
								axios.delete(window.gsau + "lunwen/deletecailiao/"+index ).then((res)=>{
									console.log(res)
									if(res.data.code==20010){
										this.$message({
											type: 'success',
											message: '删除材料成功'
										});
									}else{
										this.$message({
											type: 'error',
											message: '删除材料失败'
										});
									}
								})
								break;
							}
						}
						for (const i in this.fileMapprings) {
							if (this.fileMapprings[i].oldfilename == index) {
								index = this.fileMapprings[i].newfilename
								break;
							}
						}
						for (const i in this.form.fileList) {
							if (this.form.fileList[i] == index) {
								this.form.fileList.splice(i, 1)
								break;
							}
						}
					},
					uploadSuccess(response, file, fileList) {
						console.log(file)
						this.fileMapprings=new Array()
						this.form.fileList=new Array()
						if (response.code == 10010) {
							this.lastuploadfile = response.data.newfilename
							let m = {
								oldfilename: '',
								newfilename: ''
							}
							m.newfilename = response.data.newfilename
							m.oldfilename = response.data.oldfilename
							console.log("111111111111111")
							this.form.fileList.push(m)
							console.log(m.newfilename)
							console.log("111111111111111")
							this.$message.success(file.name + "文件上传成功")
						} else {
							this.$message.error(response.data + "：上传失败，请重新上传");
							//删除上传列表中，失败的文件
							let index = 0;
							for (const i in fileList) {
								if (fileList[i] == file){
									index = i;
									break;
								}
							}
							//移出当前文件对象
							fileList.splice(index, 1);
							this.$refs.uploadFile.clearFiles()
						}
						console.log(response.code)
						console.log(response)
						console.log(fileList)
						this.loading = false
					},
					uploadError(err, file, fileList) {
						console.log(err)
						console.log(file)
						console.log(fileList)

						this.$message.error(file.name + "上传失败，请重新上传");
						//删除上传列表中，失败的文件
						let index = 0;
						for (const i in fileList) {
							if (fileList[i] == file) {
								index = i;
								break;
							}
						}
						//移出当前文件对象
						fileList.splice(index, 1);
						this.$refs.uploadFile.clearFiles()
						this.loading = false
					},

					getCurrentTime() {
						let currentTime = new Date()
						year = currentTime.getFullYear(),
							month = currentTime.getMonth() + 1 < 10 ? '0' + (currentTime.getMonth() + 1) : currentTime
							.getMonth() + 1,
							day = currentTime.getDate() < 10 ? '0' + currentTime.getDate() : currentTime.getDate();
						hour = currentTime.getHours() < 10 ? '0' + currentTime.getHours() : currentTime.getHours();
						minutes = currentTime.getMinutes() < 10 ? '0' + currentTime.getMinutes() : currentTime
							.getMinutes();
						second = currentTime.getSeconds() < 10 ? '0' + currentTime.getMinutes() : currentTime
							.getSeconds();
						currentTime = year + "-" + month + "-" + day + " " + hour + ":" + minutes + ":" + second
						return currentTime
					},
					// 绑定提交信息按钮
					onsubmit(form) {
						//校验
						this.$refs[form].validate((valid) => {
							if (valid) {
								let currentdate = this.getCurrentTime();
								this.form.lunwenLeixing = this.form.lunwenLeixing.join(',');
								//用与提交的数据
								console.log(this.form)
								this.$confirm('是否修改？', '提示', {
									confirmButtonText: '确定',
									cancelButtonText: '取消',
									type: 'warning'
								}).then(() => {
									axios.put(window.gsau + "lunwen/update", this.form).then((res) => {
										console.log(res)
										if(res.data.code==30010){
											if(res.data.data.length==0){
												this.$message({
													type: 'error',
													message: '正在审核中，不能修改'
												});
											}else{
												this.$message({
													type: 'success',
													message: '修改成功'
												});
											}
										}else{
											this.$message({
												type: 'error',
												message: '修改失败'
											});
										}
										this.$refs[form].resetFields()
									});
								}).catch(() => {
									this.$message({
										type: 'info',
										message: '已取消修改'
									})
								})
							} else {
								this.$message({
									type: 'info',
									message: '数据输入有错，请检查'
								})
								console.log('error submit!!');
								return false;
							}
						})
					},
				},
			})
		</script>
	</body>
</html>
